<template>
  <div>
    <van-nav-bar
      :fixed="true"
		>
      <template #title>
        <p style="font-size: 16px;color: #333333;font-weight: 400;">消息</p>
      </template>
    </van-nav-bar>
    <div style="width: 100%;height: 46px;"></div>
    <van-tabs v-model="TabsActive" line-width="20">
      <van-tab title="催办消息" title-style="font-size: 16px;">
        <CustomList :loadData="loadRemindingMessage" style="margin: 16px; height: calc(100vh - 170px)">
          <template slot-scope="scope">
            <MessageCard class="message"
              title="催办消息"
              :message="scope.data.createUsername + '提醒您办理' + scope.data.taskName"
              :time="scope.data.timeData"
              :cardImg="pressIcon"
              @click.native="onHanlderTask(scope.data)"
            />
          </template>
        </CustomList>
      </van-tab>
      <van-tab title="抄送消息" title-style="font-size: 16px;">
        <CustomList :loadData="loadCopyMessage" style="margin: 16px; height: calc(100vh - 170px)">
          <template slot-scope="scope">
            <MessageCard class="message"
              title="抄送消息"
              :message="scope.data.createUsername + '抄送给您' + scope.data.taskName"
              :time="scope.data.timeData"
              :cardImg="copyIcon"
              @click.native="onHanlderTask(scope.data, scope.data.messageId)"
            />
          </template>
        </CustomList>
      </van-tab>
    </van-tabs>
    <tabbar></tabbar>
  </div>
</template>
<script>
import tabbar from '@/components/tabbar/index';
import CustomList from '@/components/CustomList.vue';
import MessageCard from './messageCard.vue';
import { FlowOperationController } from '@/api/flowController.js';

export default {
  components: {
    CustomList,
    MessageCard,
    tabbar
  },
  data () {
    return {
      pressIcon: require('@/assets/icon/messagePressIcon2x.png'),
      copyIcon: require('@/assets/icon/messageCopyIcon2x.png'),
      TabsActive: 0
    }
  },
  methods: {
    loadRemindingMessage (pageNum) {
      return new Promise((resolve, reject) => {
        let params = {
          pageParam: {
            pageNum: pageNum,
            pageSize: 10,
            count: false
          }
        }
        FlowOperationController.listRemindingTask(this, params).then(res => {
          resolve({
            dataList: res.data.dataList.map(item => {
              var time = new Date(item.createTime)
              let year = time.getFullYear();
              let month = (time.getMonth() + 1).toString();
              let data = time.getDate().toString();
              let times = year + '/' + month + '/' + data
              return {
                ...item,
                timeData: times
              }
            }),
            totalCount: res.data.totalCount
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    loadCopyMessage (pageNum) {
      return new Promise((resolve, reject) => {
        let params = {
          pageParam: {
            pageNum: pageNum,
            pageSize: 10,
            count: false
          }
        }
        FlowOperationController.listCopyMessage(this, params).then(res => {
          resolve({
            dataList: res.data.dataList.map(item => {
              var time = new Date(item.createTime)
              let year = time.getFullYear();
              let month = (time.getMonth() + 1).toString();
              let data = time.getDate().toString();
              let times = year + '/' + month + '/' + data
              return {
                ...item,
                timeData: times
              }
            }),
            totalCount: res.data.totalCount
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    onHanlderTask (row, messageId) {
      // 是否抄送消息
      let isCopy = messageId != null;
      let params = {
        processInstanceId: row.processInstanceId,
        processDefinitionId: row.processDefinitionId,
        taskId: row.taskId
      }
      let httpCall = isCopy ? FlowOperationController.viewInitialHistoricTaskInfo(this, params) : FlowOperationController.viewRuntimeTaskInfo(this, params);
      httpCall.then(res => {
        if (res.data) {
          this.$router.push({
            name: res.data.routerName || 'handlerFlowTask',
            query: {
              isRuntime: !isCopy,
              taskId: row.taskId,
              messageId: messageId,
              processDefinitionKey: row.processDefinitionKey,
              processInstanceId: row.processInstanceId,
              processDefinitionId: row.processDefinitionId,
              formId: res.data.formId,
              routerName: res.data.routerName,
              readOnly: isCopy ? true : res.data.readOnly,
              taskName: row.taskName,
              flowEntryName: row.processDefinitionName,
              processInstanceInitiator: row.processInstanceInitiator,
              // 过滤掉加签和撤销操作，加签只有在已完成任务里可以操作
              operationList: (res.data.operationList || []).filter(item => {
                return item.type !== this.SysFlowTaskOperationType.CO_SIGN && item.type !== this.SysFlowTaskOperationType.REVOKE && item.type !== this.SysFlowTaskOperationType.SIGN_REDUCTION;
              }),
              variableList: res.data.variableList
            }
          });
        }
      }).catch(e => {});
    }
  }
}
</script>
<style>
.listContent{
  width: calc(100% - 32px);
  height: calc(100% - 140px);
  overflow-y: scroll;
  padding: 16px;
}
.messageItem{
  width: calc(100% - 32px);
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  flex-direction: row;
}
.messageItem:last-child{
  margin: 0;
}
.messageItem-info{
  margin-left: 16px;
  width: calc(100% - 48px);
  padding-top: 4px;
}
.messageItem-info-title{
  width: 100%;
  color: #333333;
  font-size: 18px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.messageItem-info-title span{
  color: #999999;
  font-size: 12px;
}
.messageItem-info-val{
  width: 100%;
  color: #666666;
  font-size: 14px;
}

.message + .message {
  margin-top: 16px;
}
</style>
